<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css?v=1" media="all">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="../../layui/layui.js?v=1" charset="utf-8"></script>
    <script src="../../js/config.js?v=1"></script>
    <script src="../../js/public.js?v=1"></script>
    <script src="../../js/function.js?v=1"></script>
    <link rel="stylesheet" href="../../css/public.css?v=1">
    <link rel="stylesheet" href="../../css/follow/label.css?v=1">
</head>
<body>
<div class="container">
    <div class="table-body">
        <div class="table-title">
            <p>标签管理</p>
            <div class="table-title-right">
                <button type="button" id="add_label">新增标签</button>
            </div>
        </div>
        <form class="layui-form">
            <table class="layui-table" id="list-table" lay-even lay-skin="nob"
                   style="border-top:1px solid #cccccc;margin:0;">
                <!--<tbody>
                <tr>
                    <th>标签名称</th>
                    <th>添加时间</th>
                    <th>在使用人数</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
                <tr>
                    <td>重点患者</td>
                    <td>2018-10-10 08:00</td>
                    <td>100</td>
                    <td>
                        <img src="../../img/bianji.png" class="edit-btn">
                    </td>
                    <td>
                        <img src="../../img/shanchu.png" class="del-btn">
                    </td>
                </tr>
                <tr>
                    <td>重点患者</td>
                    <td>2018-10-10 08:00</td>
                    <td>100</td>
                    <td>
                        <img src="../../img/bianji.png" class="edit-btn">
                    </td>
                    <td>
                        <img src="../../img/shanchu.png" class="del-btn">
                    </td>
                </tr>
                <tr>
                    <td>重点患者</td>
                    <td>2018-10-10 08:00</td>
                    <td>100</td>
                    <td>
                        <img src="../../img/bianji.png" class="edit-btn">
                    </td>
                    <td>
                        <img src="../../img/shanchu.png" class="del-btn">
                    </td>
                </tr>
                <tr>
                    <td>重点患者</td>
                    <td>2018-10-10 08:00</td>
                    <td>100</td>
                    <td>
                        <img src="../../img/bianji.png" class="edit-btn">
                    </td>
                    <td>
                        <img src="../../img/shanchu.png" class="del-btn">
                    </td>
                </tr>
                <tr>
                    <td>重点患者</td>
                    <td>2018-10-10 08:00</td>
                    <td>100</td>
                    <td>
                        <img src="../../img/bianji.png" class="edit-btn">
                    </td>
                    <td>
                        <img src="../../img/shanchu.png" class="del-btn">
                    </td>
                </tr>
                <tr>
                    <td>重点患者</td>
                    <td>2018-10-10 08:00</td>
                    <td>100</td>
                    <td>
                        <img src="../../img/bianji.png" class="edit-btn">
                    </td>
                    <td>
                        <img src="../../img/shanchu.png" class="del-btn">
                    </td>
                </tr>
                </tbody>-->
            </table>
        </form>
    </div>
    <!--<div class="pages-box">
        <div class="pages-box-right">
            <p>到第</p>
            <input type="text">
            <p>页</p>
            <button>前往</button>
        </div>
        <div class="layui-box layui-laypage layui-laypage-default">
            <a style="border-left:none;">末页</a>
        </div>
        <div class="pages" id="pages"></div>
        <div class="layui-box layui-laypage layui-laypage-default">
            <a style="border-right:none;">首页</a>
        </div>
        <div class="clear"></div>
    </div>-->
</div>
<div class="fixed-container change-center-container" id="del_fixed">
    <div class="fixed-main">
        <div class="fixed-title">
            <p>提示</p>
            <i class="layui-icon layui-icon-close fixed-main-close"></i>
        </div>
        <div class="fixed-form">
            <p class="fixed-tip">您确认删除测试标签吗？</p>
            <form class="layui-form">
                <div class="fixed-form-item-confirm">
                    <input type="hidden" name="del_tag_id">
                    <button type="button" class="del-confirm-btn">是</button>
                    <button style="background:#4777E7;color:white;" type="button" class="del-cancel-btn">否</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="fixed-container change-center-container" id="edit_fixed">
    <div class="fixed-main">
        <div class="fixed-title">
            <p>编辑标签</p>
            <i class="layui-icon layui-icon-close fixed-main-close"></i>
        </div>
        <div class="fixed-form">
            <div class="fixed-form-item">
                <div class="layui-form-label">标签名称</div>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="label_text" lay-verType="tips" name="edit_tag_name" class="layui-input" placeholder="">
                </div>
            </div>
            <div class="fixed-form-item-confirm">
                <input type="hidden" name="edit_tag_id">
                <button type="button" class="edit-cancel-btn">取消</button>
                <button style="background:#4777E7;color:white;" type="button" class="edit-confirm-btn">提交</button>
            </div>
        </div>
    </div>
</div>
<div class="fixed-container change-center-container" id="add_fixed">
    <div class="fixed-main">
        <div class="fixed-title">
            <p>新增标签</p>
            <i class="layui-icon layui-icon-close fixed-main-close"></i>
        </div>
        <div class="fixed-form">
            <div class="fixed-form-item">
                <div class="layui-form-label">标签名称</div>
                <div class="layui-input-inline">
                    <input type="text" lay-verify="label_text" lay-verType="tips" name="new_tag" class="layui-input" placeholder="请输入新标签">
                </div>
            </div>
            <div class="fixed-form-item-confirm">
                <button type="button" class="addnew-cancel-btn">取消</button>
                <button style="background:#4777E7;color:white;" type="button" class="addnew-confirm-btn">提交</button>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    $(document).ready(function () {
        $('body',parent.document).find('.change-center').hide();
        $('body',parent.document).find('.hospital').css('margin-right','20px');
        layui.use(['element', 'form', 'layer', 'laydate', 'laypage', 'table'], function () {
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var laypage = layui.laypage;
            var table = layui.table;
            //分页
            laypage.render({
                elem: 'pages',
                count: 30,
                limit: 5,
                groups: 8,
                prev: '《',
                next: '》',
                first: '首页',
                last: '末页'
            });
            var params = {
                'hospital_id': getLocalStorage('hosp_id'),
                'department_id': getLocalStorage('dept_id'),
            };

            // v1.1 信息校验
            form.verify({
                label_text: function(value){
                    if(value.length > 20){
                        return '标签不能超过20个字';
                    }
                },
            });

            //删除弹窗
            $('.del-btn').click(function () {
                $('#del_fixed').show();
            })
            $('#del_fixed .fixed-main-close').click(function () {
                $('#del_fixed').hide();
            })
            $('#del_fixed .del-cancel-btn').click(function () {
                $('#del_fixed').hide();
            })
            $('#del_fixed .del-confirm-btn').click(function () {
                var id = $('input[name=del_tag_id]').val();
                params.id = id
                params._method = 'DELETE';
                if (id == '' || id == 0) {
                    layer.msg('删除失败请重试，请重试', {icon: 5, time: 1500});
                    return false;
                }
                var loadindex = layer.load();
                ajax_post(configUrl.tagsDelete, params, (res) => {
                    layer.close(loadindex);
                    if (res.status == 0) {
                        layer.msg('删除成功', {icon: 1, time: 1000}, function () {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                })
            })
            //编辑弹窗
            $('.edit-btn').click(function () {
                $('#edit_fixed').show();
            })
            $('#edit_fixed .fixed-main-close').click(function () {
                $('#edit_fixed').hide();
            })
            $('#edit_fixed .edit-cancel-btn').click(function () {
                $('#edit_fixed').hide();
            })
            $('#edit_fixed .edit-confirm-btn').click(function () {
                var id = $('input[name=edit_tag_id]').val();
                var name = $('input[name=edit_tag_name]').val();
                params.name = name;
                params.id = id
                params._method = 'PUT';
                if (name == '') {
                    layer.msg('请输入标签名称', {icon: 5, time: 1500});
                    return false;
                }
                var loadindex = layer.load();
                ajax_post(configUrl.updateTags, params, (res) => {
                    layer.close(loadindex);
                    if (res.status == 0) {
                        layer.msg('编辑成功', {icon: 1, time: 1000}, function () {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                })
            })
            //新增标签
            $('#add_label').click(function () {
                $('#add_fixed').show();
            })
            $('#add_fixed .fixed-main-close').click(function () {
                $('#add_fixed').hide();
            })
            $('#add_fixed .addnew-cancel-btn').click(function () {
                $('#add_fixed').hide();
            })
            $('#add_fixed .addnew-confirm-btn').click(function () {
                var name = $('input[name=new_tag]').val();
                params.name = name;
                if (name == '') {
                    layer.msg('请输入新标签名称', {icon: 5, time: 1500});
                    return false;
                }
                var loadindex = layer.load();
                ajax_post(configUrl.tagsCreate, params, (res) => {
                    console.log(res);
                    layer.close(loadindex);
                    if (res.status == 0) {
                        layer.msg('添加成功', {icon: 1, time: 1000}, function () {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                })
            })


            getTabList(params);

            function getTabList(params) {
                params.has_num = 1;
                ajax_get(configUrl.hospTags, params, (res) => {
                    console.log('123');
                    console.log(res);
                    if (res.status == 0) {
                        lists = res.data;
                        var listsTmp = [];
                        $.each(lists.list, function (index, item) {
                            var tag_name = item.name;
                            str = {
                                "name": item.name,
                                "created_at": item.created_at,
                                'used_num': item.used_num,
                                'edit': '<a href="javascript:;" class="edit-btn" onclick="editTag(' + index + ')"><img src="../../img/bianji.png"></a>',
                                'delete': '<a href="javascript:;" class="edit-btn" onclick="delTag(' + index + ')"><img src="../../img/shanchu.png" class="del-btn"></a>',
                            };
                            listsTmp.push(str)
                        });
                        table.render({
                            elem: "#list-table",
                            cols: [[ //标题栏
                                {field: 'name', title: '标签名称'},
                                {field: 'created_at', title: '添加时间'},
                                {field: 'used_num', title: '在使用人数'},
                                {field: 'edit', title: '编辑'},
                                {field: 'delete', title: '删除'},
                            ]]
                            , data: listsTmp
                            , page: true
                            , even: true
                        })
                    }
                });
            }

            editTag = function (index) {
                id = lists.list[index].id;
                name = lists.list[index].name;
                $('input[name=edit_tag_id]').val(id);
                $('input[name=edit_tag_name]').val(name);
                $('#edit_fixed').show();

            }

            delTag = function (index) {
                id = lists.list[index].id;
                $('input[name=del_tag_id]').val(id);
                $('#del_fixed').show();

            }


        })
    })
</script>
</html>